<template>
    <el-select
      v-model="sValue"
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词搜索"
      :remote-method="remoteMethod"
      :loading="loading"
      @change="change"
      style="width: 100%;"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
  </template>
<script setup>
    import { ref,onMounted } from 'vue';
    import {getUserList} from '@/api/member' 

    const props = defineProps(['modelValue'])
    const emit = defineEmits(['update:modelValue','onchange'])

    const options = ref([])
    const loading = ref(false)
    const sValue = ref('')
    onMounted(()=>{
        
    })
    const remoteMethod = async (query)=>{
        if (query !== '') {
          loading.value = true
          const res = await getUserList({
            pageNumber:1,
            pageSize:100,
            name:query
          })
          loading.value = false
          if(res.code == 0){
            options.value = res.data.list
          }else{
            options.value = []
          }
        } else {
            options.value = []
        }
    }
    const change = (e)=>{
     // console.log("TT:",e)
      //console.log("sValue:",sValue.value)
      const item = options.value.find(item =>item.id == e)
      emit('update:modelValue',e)
      emit('onchange',item)
    }
</script>